<template>
    <div v-if="visible">
        <el-dialog v-model="visible" title="选择优惠券" width="70%" @close="handleClose">
            <div class="zw-form-layout">
                <el-form :model="form" ref="formRef" label-width="auto">
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <el-form-item label="优惠券名称" prop="couponName"
                                ><el-input v-model="form.couponName" placeholder="请输入优惠券名称"></el-input
                            ></el-form-item>
                        </el-col>
                        <el-col :span="16" class="zw-form-btns">
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button plain @click="resetHandler">清空</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div style="padding-top: 16px">
                <el-table :data="tableList" stripe style="width: 100%" ref="tableRef">
                    <el-table-column fixed="left" label="优惠券名称" prop="couponName" min-width="140"
                        ><template v-slot="scope"
                            ><div class="imgcontent">
                                <el-radio
                                    v-model="scope.row.check"
                                    :label="1"
                                    @change="
                                        () => {
                                            changeStatus(scope.$index);
                                        }
                                    "
                                    >{{}}</el-radio
                                >
                                <div class="goods">
                                    <div>{{ scope.row.couponName }}</div>
                                </div>
                            </div></template
                        ></el-table-column
                    >
                    <el-table-column label="内容" prop="couponDiscountContent" min-width="140"
                        ><template v-slot="scope">{{ couponContent(scope.row) }}</template></el-table-column
                    >
                    <el-table-column label="创建时间" prop="createdAt" min-width="70"></el-table-column>
                    <el-table-column label="状态" prop="couponStatusName" min-width="70"
                        ><template v-slot="scope">{{
                            scope.row.couponInfo[0].couponStatusName
                        }}</template></el-table-column
                    >
                </el-table>

                <div class="zw-pagination">
                    <PaginationVue
                        :pageSize="page.perPage"
                        :currentPage="page.page"
                        :total="total"
                        @sizeChange="sizeChange"
                        @pageChange="pageChange"></PaginationVue>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="operate(1)">取消</el-button>
                    <el-button type="primary" @click="operate(2)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, watch, computed } from 'vue';
import PaginationVue from '@/components/Pagination.vue';
import { floatDivide } from '@/commons/utils';
import request from '@/request';
const emit = defineEmits(['submit', 'cancel']);
const props = defineProps({
    open: { type: Boolean, default: false },
    id: { type: String, default: '' }
});
const visible = computed(() => props.open);
const formRef = ref();
const tableRef = ref();
const page = reactive({ perPage: 10, page: 1 });
const total = ref(0);
const tableList = ref([]);
/** 初始化数据*/
const bannerParam = reactive({ id: '', name: '' });
const form = reactive({
    couponName: ''
});
const getGoodList = () => {
    request('couponListServ', { ...form, ...page }).then(res => {
        total.value = res.data.totalCount;
        tableList.value = res.data.list;
        tableList.value.map((item, index) => {
            tableList.value[index] = { ...item, check: 0 };
            if (item.couponId == bannerParam.id) {
                tableList.value[index].check = 1;
            }
        });
    });
};
getGoodList();
/**初始化数据源 */
const init = () => {
    page.page = 1;
    getGoodList();
};
const search = () => {
    page.page = 1;
    getGoodList();
};
const couponContent = row => {
    const obj = (row?.couponInfo || [])[0] || {};
    let pre = '';
    let num = '';
    switch (obj.couponPrerequisites) {
        case 1:
            pre = '无门槛';
            break;
        case 2:
            pre = `满${floatDivide(obj.couponPrerequisitesAdditional, 100)}`;
            break;
        case 3:
            pre = `满${obj.couponPrerequisitesAdditional}件`;
            break;
        default:
            break;
    }
    switch (obj.couponType) {
        case 1:
            num = `减${floatDivide(obj.couponDiscountContent, 100)}`;
            break;
        case 2:
            num = `打${floatDivide(obj.couponDiscountContent, 100)}折`;
            break;
        default:
            break;
    }
    return pre + num;
};
/**单选选中操作 */
const changeStatus = param => {
    if (!props.multiple) {
        tableList.value.map(item => {
            item.check = 0;
        });
        tableList.value[param].check = 1;
        bannerParam.id = tableList.value[param].couponId;
        bannerParam.name = tableList.value[param].couponName;
    }
};
/**取消/确定 */
const operate = index => {
    if (index == 1) {
        emit('cancel');
    } else {
        emit('submit', bannerParam);
    }
};
// 取消操作
const handleClose = () => {
    operate(1);
};
/**
 * 重置
 */
const resetHandler = () => {
    formRef.value.resetFields();
    search();
};
const sizeChange = data => {
    page.perPage = data;
    page.page = 1;
    getGoodList();
};
const pageChange = pageNum => {
    page.page = pageNum;
    getGoodList();
};
watch(
    () => props.id,
    val => {
        bannerParam.id = val;
    },
    { immediate: true }
);
defineExpose({ init, page });
</script>
<style lang="scss" scoped>
:deep.el-radio {
    margin-right: 14px;
}
.imgcontent {
    display: flex;
    align-items: center;
    .imglogo {
        width: 69px;
        height: 60px;
    }
    .goods {
        padding-left: 9px;
        .text {
            font-size: 14px;
            font-weight: 300;
            color: #fa6a0a;
            line-height: 14px;
        }
    }
}
</style>
